{% extends "myadmin/base/content_base.html" %}
{% load static %}

{% block content %}
  <div class="row">
    <div class="col-md-12 col-xs-12 col-sm-12">
      <div class="box box-primary">
        <div class="box-body">



<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style type="text/css">
    			.selectBox{
				width: 200px;
				height: 36px;
				line-height: 36px;
				background: #f72323;
			}
			input::-ms-clear, input::-ms-reveal{
				/*clear去掉叉  reveal去掉眼睛;但是只能去掉ie10及以上，ie9及以下去不掉*/
			    display: none;
			}

			.inputCase{
				position: relative;
				width: 100%;
				height: 100%;
				box-sizing: border-box;
			}
			.inputCase input.imitationSelect{
				width: 100%;
				height: 100%;
				box-sizing: border-box;
				border: 1px solid #ccc;
				display: block;
				text-indent: 20px;
				cursor: default;
			}
			.inputCase i.fa{
				position: absolute;
				right: 10px;
				top: 10px;
				color: #007AFF;
				font-size: 20px;
				z-index: 99999;
			}
			.fa{
				cursor: pointer;
			}
			.selectUl{
				display: none;
				padding: 0;
				margin: 0;
				border-bottom: 1px solid #ccc;
				border-left: 1px solid #ccc;
				border-right: 1px solid #ccc;
			}
			.selectUl li{
				height: 36px;
				line-height: 36px;
				list-style: none;
				text-indent: 20px;
				border-bottom: 1px solid #ccc;
			}
			.selectUl li:hover{
				background: #ddd;
			}
			.selectUl li:last-child{
				border-bottom: 0 none;
			}
#apDiv1 {
	position: absolute;
	left: 610px;
	top: 141px;
	width: 800px;
	height: 600px;
	z-index: 1;
	background-image: url({% static  '背景图.png'%});
}
#apDiv2 {
	position: absolute;
	left: 150px;
	top: 335px;
	width: 144px;
	height: 220px;
    margin-bottom:10px;
	{#z-index: 2;#}
}
#apDiv3 {
	position: absolute;
	left: 608px;
	top: 494px;
	width: 149px;
	height: 221px;
	z-index: 3;
	{#background-color: #00FFFF;#}
}
#apDiv4 {
	position: absolute;
	left: 945px;
	top: 493px;
	width: 151px;
	height: 225px;
	z-index: 4;
}
#apDiv5 {
	position: absolute;
	left: 279px;
	top: 364px;
	width: 98px;
	height: 25px;
	z-index: 5;
}
#apDiv6 {
	position: absolute;
	left: 610px;
	top: 367px;
	width: 136px;
	height: 27px;
	border: solid 1px;
	z-index: 6;
}
#apDiv7 {
	position: absolute;
	left: 950px;
	top: 364px;
	width: 119px;
	height: 28px;
	z-index: 7;
	border: solid 1px;
}

#apDiv11 {
	position: absolute;
	left: 284px;
	top: 173px;
	width: 137px;
	height: 55px;
	z-index: 11;
	{#background-color: #00FFFF;#}
}
#apDiv12 {
	position: absolute;
	left: 151px;
	top: 141px;
	{#width: 400px;#}
	{#height: 71px;#}
	z-index: 12;

}
#apDiv13 {
	position: absolute;
	left: 605px;
	top: 406px;
	width: 242px;
	height: 76px;
	z-index: 13;

}
#apDiv14 {
	position: absolute;
	left: 941px;
	top: 400px;
	width: 490px;
	height: 85px;
	z-index: 14;
}

            table {
                /*设置相邻单元格的边框间的距离*/
                border-spacing: 0;
                /*表格设置合并边框模型*/
                border-collapse: collapse;
                text-align: center;
            }
            /*关键设置 tbody出现滚动条*/
            table tbody {
                display: block;
                width: 300px;
                height: 360px;
                overflow-y: scroll;
            }

            table thead,
            tbody tr {
                display: table;
                width: 100%;
                table-layout: fixed;
            }
            /*关键设置：滚动条默认宽度是16px 将thead的宽度减16px*/
            table thead {
                width: calc( 100% - 1em)
            }


            table thead th {
                background: #ccc;
            }
</style>
</head>

<body>

<div id="apDiv1">
    <div class="course-video" id="course-video">
    <div id="playercontainer"></div>
    <span class="course-data" data-video-url="{{obj.video_url }}"></span>
</div>
</div>
<div id="apDiv2">
  <table width="200" height="215" border="1" margin-bottom="10px">
    <tr>
        <th>#</th>
      <th scope="col">文件名</th>
        <th scope="col">操作</th>
    </tr>
      {% for obj in course %}
    <tr>
    <td style="width: 40px" data-url="{% url 'myadmin:course_update' obj.id %} "><a href="#">{{ forloop.counter }}</a></td>
      <th scope="row" class="play" data-video-url="{{obj.video_url }}">{{obj.title}}</th>
        <th scope="row">
            <button class="btn btn-xs btn-danger btn-del" data-name="{{ obj.title}}" data-id="{{ obj.id}}">删除</button>
        </th>
    </tr>


{% endfor %}
  </table>
</div>
{#<div id="apDiv3">#}
{#  <table width="200" height="215" border="1" margin-bottom="10px">#}
{#    <tr>#}
{#        <th>#</th>#}
{#      <th scope="col">文件名</th>#}
{#        <th scope="col">操作</th>#}
{#    </tr>#}
{#      {% for obj in examples %}#}
{#    <tr>#}
{#    <td style="width: 40px" data-url="{% url 'myadmin:course_update' obj.id %} "><a href="#">{{ forloop.counter }}</a></td>#}
{#      <th scope="row" class="play" data-video-url="{{obj.video_url }}">{{obj.title}}</th>#}
{#        <th scope="row">#}
{#            <button class="btn btn-xs btn-danger btn-del" data-name="{{ obj.title}}" data-id="{{ obj.id}}">删除</button>#}
{#        </th>#}
{#    </tr>#}
{##}
{##}
{#{% endfor %}#}
{#  </table>#}
{#</div>#}
{##}
{#<div id="apDiv4">#}
{#  <table width="200" height="215" border="1" margin-bottom="10px">#}
{#  <tbody style="overflow-y: scroll;">#}
{#    <tr>#}
{#        <th>#</th>#}
{#      <th scope="col">文件名</th>#}
{#        <th scope="col">操作</th>#}
{#    </tr>#}
{#      {% for obj in outlines %}#}
{#    <tr>#}
{#    <td style="width: 40px" data-url="{% url 'myadmin:course_update' obj.id %} "><a href="#">{{ forloop.counter }}</a></td>#}
{#      <th scope="row" class="play" data-video-url="{{obj.video_url }}">{{obj.title}}</th>#}
{#        <th scope="row">#}
{#            <button class="btn btn-xs btn-danger btn-del" data-name="{{ obj.title}}" data-id="{{ obj.id}}">删除</button>#}
{#        </th>#}
{#    </tr>#}
{##}
{##}
{#{% endfor %}#}
{#  </tbody>#}
{#  </table>#}
{#</div>#}
{#<div id="apDiv5" style="border: solid 1px;">上课文件列表</div>#}
{#<div id="apDiv6">说明文件列表</div>#}
{#<div id="apDiv7">示范文件列表</div>#}
        <div class="box-body">
{#            <div style="margin-bottom: 10px">#}
{#                <form class="form-inline user-query">#}
{#                    <div class="form-group">#}
{#                        <label for="">请输入课件名称</label>#}
{#                        <input type="text" class="form-control" name="lesson_name" value="{{ lesson_name }}">#}
{##}
{#                    </div>#}
{#                    <div class="form-">#}
{#                            <label for="">搜索或添加新课件</label>#}
{#                        <input id="inputCourse" type="text" class="form-control" name="lesson_name" value="{{ lesson_name }}">#}
{#                        <input id="subBtn" type="submit" value="提交">#}
{#                    </div>#}
{#                    <div class="form-group">#}
{#                        <label for="">课程类型</label>#}
{#                        <select name="category" id="" class="form-control">#}
{#                            <option value="">所有</option>#}
{#                                      {% for category in categorys %}#}
{##}
{#                                <option {% if category__id == category.id %}selected{% endif %} value="{{ category.id }}">{{ category.name }}</option>#}
{#                                <option value="{{ category.id }}">{{ category.name }}</option>#}
{##}
{#                            {% endfor %}#}
{#                        </select>#}
{#                    </div>#}
{##}
{#                    <button type="button" class="btn btn-info query">查询</button>#}
{#                    <button type="button" class="btn btn-default reset">重置</button>#}
{#                </form>#}
{#            </div>#}




        </div>

<div id="apDiv11">

{#<p>选择或输入课程章节</p>#}
{#        <div class="selectBox">#}
{#        	<div class="inputCase">#}
{##}
{#				<input style="float: left" class="imitationSelect" type="text" oulName="" oulId="" value=""/>#}
{#                <input style="float: right" type="submit"/>#}
{#				<i class="fa fa-caret-down"></i>#}
{#			</div>#}
{#			<ul class="selectUl">#}
{#                {% for obj in lesson %}#}
{#				<li oliName="{{ obj.lesson__name }}" oliId="1" class="actived_li">{{ obj.lesson__name }}</li>#}
{#                {% endfor %}#}
{#			</ul>#}
{#        </div>#}


</div>
<li style="color: red">点击文件名后再点击播放器播放</li>
<li style="color: red">上传文件后需刷新页面查看文件</li>
    <label id="apDiv12">添加文件
        <input id="upload-file-server" type="file" >
{#        <input id="course_put" type="submit" value="提交">#}
    </label>
    <p></p>
{#</div>#}
{#<div id="apDiv13">#}
{#    <label id="apDiv13">添加文件#}
{#        <input type="file" >#}
{#        <input type="submit" value="提交">#}
{#    </label>#}
{#<div id="apDiv14">#}
{#    <label id="apDiv14">添加文件#}
{#        <input type="file" >#}
{#        <input  type="submit" value="提交">#}
{#    </label>#}
{#</div>#}
</body>
</html>

{#        </div>#}
{#        <div class="box-footer">#}
{#          {% if course %}#}
{#            <a href="javascript:void (0);" class="btn btn-primary pull-right" id="btn-pub-news"#}
{#               data-news-id="{{ course.id }}">更新课程 </a>#}
{#          {% else %}#}
{#            <a href="javascript:void (0);" class="btn btn-primary pull-right" id="btn-pub-news">发布课程 </a>#}
{#          {% endif %}#}
{#        </div>#}
      </div>
    </div>
  </div>



    </div>


     <!-- delete modal -->
    <div class="modal modal-danger fade" id="modal-delete">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">警告</h4>
                </div>
                <div class="modal-body">
                    <p>One fine body&hellip;</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline pull-left" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-outline delete-confirm">删除</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->


      <div class="modal modal-danger fade" id="modal-delete">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">警告</h4>
                </div>
                <div class="modal-body">
                    <p>One fine body&hellip;</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline pull-left" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-outline delete-pass">删除</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>

    <!-- update modle -->
    <div class="modal fade" id="modal-update" role="dialog" aria-labelledby="myLargeModalLabel">
        <div class="modal-dialog">
            <div class="modal-content">

            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->


{% endblock %}

{% block script %}
{##}
{#    <script src="{% static 'js/base/fsweetalert.js' %}"></script>#}
{#    <script src="{% static 'js/base/sweetalert.min.js' %}"></script>#}
                    <script src="{% static 'node_modules/@baiducloud/sdk/dist/baidubce-sdk.bundle.min.js' %}"></script>
            <script type="text/javascript" src="https://cdn.bdstatic.com/jwplayer/latest/cyberplayer.js"></script>

        <script src="{% static 'js/course/courses_pub_add.js' %}"></script>
        <script src="{% static 'js/course/courses_pub3.js' %}"></script>
{#    <script src="{% static 'js/myadmin/course/srcelect.js' %}"></script>#}
{#    <script type="text/javascript" src="{% static 'js/course/cyberplayer.js' %}"></script>#}

{#        <script type="text/javascript" src="https://cdn.bdstatic.com/jwplayer/latest/cyberplayer.js"></script>#}





{% endblock %}